<template> 
	<view class="home-container">
		<!-- 顶部轮播图 -->
		<swiper :indicator-dots= "true" :autoplay= "true" :interval= "4000" :duration= "2000" :circular= "true">
			<swiper-item v-for= "(item,i) in swiperlist" :key="i"> 
				<view class="swiper-item">
					<image :src= "item.image_src" mode="scaleToFill"></image>
				</view>
			</swiper-item> 
		</swiper>
		
		<!-- 模块卡片区域 -->
		<view class="card-container">
			<view class="card blue-card" @click="goTo('device')">
				<text>设备控制</text>
			</view>
			<view class="card blue-card" @click="goTo('analysis')">
				<text>数据分析</text>
			</view>
			<view class="card blue-card" @click="goTo('alarm')">
				<text>报警记录</text>
			</view>
			<view class="card blue-card" @click="goTo('maintenance')">
				<text>设备运维</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 直接定义本地轮播图数据
const swiperlist = ref([
  { image_src: 'https://smart-orchard.oss-cn-beijing.aliyuncs.com/fire_monitor.png' },
  { image_src: 'https://smart-orchard.oss-cn-beijing.aliyuncs.com/pond_monitor.png' },
  { image_src: 'https://smart-orchard.oss-cn-beijing.aliyuncs.com/soil_monitor.png' },
  { image_src: 'https://smart-orchard.oss-cn-beijing.aliyuncs.com/flower_monitor.png' }
])

// 页面跳转
const goTo = (page) => {
	uni.navigateTo({
		url: `/pages/${page}/${page}`
	})
}

onLoad(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.redirectTo({ url: '/pages/login/login' })
  }
})

</script>


<style lang="scss">
	
.home-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
	min-height: 100vh;
}

swiper {
	width: 100%;
	height: 400rpx;
}

.swiper-item {
  width: 100%;
  height: 100%; /* 继承swiper的高度 */
}

.swiper-item image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;	
}

/* 卡片区域 */
.card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 30rpx;
	width: 90%;
}

/* 卡片基础样式 */
.card {
	width: 45%;
	margin-bottom: 30rpx;
	padding: 60rpx 0; /* 让文字垂直居中 */
	border-radius: 20rpx;
	text-align: center;
	color: #fff; /* 白色字体 */
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
	transition: 0.3s;
}

/* 蓝色卡片背景 */
.blue-card {
	background-color: #00aaff; /* 亮蓝色，可根据需要换成你喜欢的颜色 */
}

/* 点击时缩放动画效果 */
.card:active {
	transform: scale(0.97);
}
</style>
